<!doctype html>
<!--

//综合camanjs 加滤镜效果
//手机端不能运行

//改一下select样式 
	点两次 select样式会变化

//https://github.com/jaysalvat/jquery.facedetection/blob/master/README.md
//https://evanw.github.io/glfx.js/docs/
//https://trackingjs.com/docs.html
//http://camanjs.com/ 
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
	
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
	
<link href="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.js"></script>
	
<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
	
<script type="text/javascript" src="js/canvas2image.js"></script>	
<link href="css/css.css" rel="stylesheet">
<script type="text/javascript" src="js/js.js"></script>
	
<style>
@font-face
{
font-family: Noto Sans S Chinese Light;
src: url('ttf/NotoSansHans-Light.otf'); /* IE9+ */
}
@font-face
{
font-family: 方正兰亭大黑_GBK;
src: url('ttf/方正兰亭大黑_GBK.ttf');
}
.btn-warning {
	color: #fff;
	background-color: rgba(0,0,0,0);/*#f0ad4e*/
	border-color: rgba(0,0,0,0)/*#eea236*/;
	font-size: 12pt;
	font-family: 方正兰亭大黑_GBK;
}
.btn-warning.focus, .btn-warning:focus {
	color: #fff;
	background-color: rgba(0,0,0,0) /*#ec971f*/;
	border-color: rgba(0,0,0,0)/*#985f0d*/
}
.btn-warning:hover {
	color: #fff;
	background-color: rgba(0,0,0,0) /*#ec971f*/;
	border-color: rgba(0,0,0,0)/*#d58512*/
}
.btn-warning.active, .btn-warning:active, 
	.open>.dropdown-toggle.btn-warning{
	color: #fff;
	background-color: rgba(0,0,0,0)/*#ec971f*/;
	border-color: rgba(0,0,0,0)/*#d58512*/
}
.btn-warning.active.focus, 
.btn-warning.active:focus, 
.btn-warning.active:hover, .btn-warning:active.focus, 
.btn-warning:active:focus, .btn-warning:active:hover, 
.open>.dropdown-toggle.btn-warning.focus, 
.open>.dropdown-toggle.btn-warning:focus, 
.open>.dropdown-toggle.btn-warning:hover {
	color: #fff;
	background-color: rgba(0,0,0,0)/*#d58512*/;
	border-color: rgba(0,0,0,0);/*#985f0d*/
}
.btn-warning.active, 
.btn-warning:active, 
.open>.dropdown-toggle.btn-warning {
	background-image: none;
}
.btn-warning.disabled.focus, 
.btn-warning.disabled:focus, 
.btn-warning.disabled:hover, 
.btn-warning[disabled].focus, 
.btn-warning[disabled]:focus, 
.btn-warning[disabled]:hover, 
fieldset[disabled] .btn-warning.focus,
fieldset[disabled] .btn-warning:focus, 
fieldset[disabled] .btn-warning:hover {
	background-color: rgba(0,0,0,0)/*#f0ad4e*/;
	border-color: rgba(0,0,0,0)/*#eea236*/
}
.btn-warning .badge {
	color: #f0ad4e;
	background-color: #fff
}
.bootstrap-select > .dropdown-toggle.bs-placeholder, 
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover, 
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus, 
.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
	color: #FFFFFF;
	
}
/*去除选择框的outline*/
.bootstrap-select .dropdown-toggle:focus {
	outline: none !important;
}
/*去除选项的outline*/
a:focus {
	outline: none !important;
}
/*option的样式*/	
.bootstrap-select.btn-group .dropdown-menu li a.opt {
	line-height: 2em;
	font-family: Noto Sans S Chinese Light;
	font-size: 14px;
	color: #6F6F6F;
}
.bootstrap-select.btn-group .dropdown-menu li a.opt:hover {
	background-color: rgba(225,225,225,0.7);
}
/*group分组样式*/
.bootstrap-select.btn-group .dropdown-menu li {
	font-family:Noto Sans S Chinese Light;
	font-size: 12px;
	color: #ABABAB;
}
.open {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	
}
.dropdown-menu {
	background-color: rgba(255,255,255,0.7);
	overflow-x: hidden;
}

/* 滚动条背景基本样式 */
scrollbar {
	-moz-appearance: none !important;
	background-color: transparent !important;/* 滚动条背景透明 */
	background-image: none !important; /* 滚动条背景图案不显示 */
	position: relative !important; /* 更改滚动条的定位方式为相对 */
	overflow: hidden !important;
	z-index: 999999999 !important; /* 把滚动条提到Z轴最上层 */
}
/* 滚动条按钮基本样式 */
scrollbar thumb {
	-moz-appearance: none !important;
	background-color: rgba(0,100,255,.25) !important;
	border-radius: 0px !important;
	border: 1px !important; /* 滚动条按钮边框 */
	border-color: rgba(0,100,255,.1) !important;  /* 滚动条按钮边框颜色和透明度 */
}
/* 滚动条按钮:鼠标悬停与点击拖动时基本样式 */
scrollbar:hover thumb, scrollbar thumb:hover,scrollbar thumb:active {
	background-color: rgba(0,100,255,.75) !important;
	border: 0px !important;
}
/* 垂直滚动条 */
/* 把滚动条位置移到屏幕外，这里的像素应该等于垂直滚动条宽度的负值 */
scrollbar[orient="vertical"] {
	margin-left: -5px !important;
	min-width: 5px !important;
	max-width: 5px !important;
}
/* 垂直滚动条按钮的左边框样式 */
scrollbar thumb[orient="vertical"] {
	border-style: none none none solid !important;
}
/* 水平滚动条 */
/* 把滚动条位置移到屏幕外，这里的像素应该等于垂直滚动条宽度的负值 */
scrollbar[orient="horizontal"] {
	margin-top: -5px !important;
	min-height: 5px !important;
	max-height: 5px !important;
}
/* 水平滚动条按钮的上边框样式 */
scrollbar thumb[orient="horizontal"] {
	border-style: solid none none none !important;
}
/* 去除垂直与水平滚动条相交汇的角落 */
scrollbar scrollcorner {
	display: none ! important;
}
/* 滚动条两端按钮不显示 */
scrollbar scrollbarbutton {
	display: none ! important;
}
</style>
<title>01</title>
</head>

<body class="text-center">
<form name="formHead" id="formHead" enctype="multipart/form-data">
  <!--背景
  <div id="background"> <img class="img-responsive" src="./img/背景.png"> </div>
  --> 
  <!--返回按钮-->
  <div id="btn_close" onClick="clickclose();"> <img class="img-responsive" src="http://i1.bvimg.com/625035/371ff776d2552a03.png"> </div>
  
  <!--装饰线-->
  <div id="line"></div>
  
  <!--美颜相机文字-->
  <div id="title"> 美颜相机 </div>
  
  <!--装饰-->
  <div id="decoration"> <img class="img-responsive" src="http://i1.bvimg.com/625035/c99b65c72b062d02.png"> </div>
  
  <!-------------------------------------------------------------------------------> 
  <!--打开相机/打开相册按钮-->
  <div id="btn">
    <div id="btn_opencam">
      <label for="file_for_cam">　 <img class="img-responsive"  src="http://i1.bvimg.com/625035/564714a482e55db7.png"> </label>
      <input type="file" name="file_for_cam" id="file_for_cam" accept="image/*" capture="camera" onchange="canvas_change_cam(event);"/>
    </div>
    <div id="btn_openimg">
      <label for="file_for_img">　 <img class="img-responsive"  src="http://i1.bvimg.com/625035/4ee1eba44077f8a0.png" > </label>
      <input type="file" name="file_for_img" id="file_for_img" accept="image/*" onchange="canvas_change_img(event);"/>
    </div>
  </div>
  
  <!-------------------------------------------------------------------------------> 
  <!--美颜按钮-->
  <div id="btn02">
    <div id="btn_white" onClick="revoke();"> <img class="img-responsive" src="http://i1.bvimg.com/625035/fba7dcdce8a2f39e.png"> </div>
    <div id="btn_beauty" onClick="down();"> <img class="img-responsive" src="http://i1.bvimg.com/625035/36f0838c5356f09f.png"> </div>
    <div id="btn_eye" onClick="up();"> <img class="img-responsive" src="http://i1.bvimg.com/625035/13aba9eb95a05944.png"> </div>
    <div id="btn_mouth" onClick="clear_all();"> <img class="img-responsive" src="http://i1.bvimg.com/625035/ba2eae3835aa7bc0.png"> </div>
  </div>
  
  <!-------------------------------------------------------------------------------> 
  <!--保存按钮-->
  <div id="btn03">
    <div id="btn_save" onClick="Download();"> 保存 </div>
  </div>
</form>

<!-------------------------------------------------------------------------------> 
<!--处理图片-->
<div id = "canvas">
  <canvas id="myCanvas"></canvas>
</div>

<!------------------------------------------------------------------------------->
<div id="d_sel">
  <select id="sel" class="selectpicker show-tick" title="请选择美颜效果" 
   data-style="btn-warning" 
   data-width="auto" 
   data-size="8" 
   onchange="sel();">
    <optgroup label="Photoshop 效果">
    <option value="soft_light">柔光效果</option>
    <option value="pin_light">点光效果</option>
    <option value="overlay">叠加效果</option>
    <option value="darken">颜色加深效果</option>
    <option value="screen">滤色效果</option>
    </optgroup>
    <optgroup label="测试效果">
    <option value="fanse01">变亮</option>
    <option value="fuzzy02">模糊</option>
    <option value="zuiba">嘴部处理</option>
    <option value="detectskin">皮肤区域检测</option>
    <option value="detectred">嘴部（红色区域）检测</option>
    </optgroup>
    <optgroup label="参数调节">
    <option value="gamma">Gamma</option>
    <option value="vibrance">Vibrance</option>
    <option value="brightness">Brightness</option>
    <option value="clip">Clip</option>
    <option value="Fuzzy">Fuzzy</option>
    <option value="contrast">Contrast</option>
    <option value="saturation">Saturation</option>
    <option value="sepia">Sepia</option>
    <option value="rgb2hsl">Rgb2hsl</option>
    <option value="hsl2rgb">Hsl2rgb</option>
    <option value="option_on_hsl">Option_on_hsl</option>
    <option value="hue">Hue</option>
    <option value="gauss">Gauss</option>
    </optgroup>
  </select>
</div>

<!-------------------------------------------------------------------------------> 
<!-------------------------------------------------------------------------------> 

<script>
		// JavaScript Document
		var myCanvas = document.getElementById( 'myCanvas' );
		var myFile = document.getElementById( 'file_for_cam' );
		var myFile_img = document.getElementById( 'file_for_img');
		var context = myCanvas.getContext( '2d' );
		var ImageData_hsl = new Array();
		var ImageData_original = new Array();
		var count = 0;
		var record_data = new Array();
		var adjust= 1 ;
		$('.selectpicker').selectpicker('hide');
		
		//-----------------------------------------------------------------------------

		//-----------------------------------------------------------------------------
		function putImage2Canvas( event ) {
			var img = new Image();
			img.src = event.target.result;
			img.onload = function () {

				myCanvas.width = img.width; //document.documentElement.clientWidth;
				myCanvas.height = img.height; //document.documentElement.clientHeight;

				var het = ( img.height * myCanvas.width ) / img.width;
				context.drawImage( img, 0, 0, myCanvas.width, het );

				//--------------------------------------------------------------------

				var ImageData = context.getImageData( 0, 0, myCanvas.width, myCanvas.height);
				//alert(ImageData.data);
				for ( var i = 0, len = ImageData.data.length; i < len; i += 4 ) {
					ImageData_original[ i ] = ImageData.data[ i ];
					ImageData_original[ i + 1 ] = ImageData.data[ i + 1 ];
					ImageData_original[ i + 2 ] = ImageData.data[ i + 2 ];
					ImageData_original[ i + 3 ] = ImageData.data[ i + 3 ];
				}
				//alert(ImageData_original);
				resize(); 
			}
		}
		//---------------------------------------------------------------------------

		//---------------------------------------------------------------------------	
		function canvas_change_cam( event ) {
			var selectedFile = event.target.files[ 0 ];
			var reader = new FileReader();
			reader.onload = putImage2Canvas;
			reader.readAsDataURL( selectedFile );
	
			$( document ).ready( function () {
				$( "#title" ).animate({
					left: '-100%',
					opacity: '0%',
					speed: 'slow'
				});
				$( "#line" ).animate({
					left: '-100%',
					opacity: '0%',
					speed: 'slow'
				});
				$( "#btn" ).fadeOut( "fast" );
				$( "#decoration" ).fadeOut("fast");
				$( "#btn_close" ).fadeIn( "slow" );
				$( "#myCanvas" ).fadeIn( "slow" );
				$( "#btn02" ).fadeIn( "slow" );
				$( "#btn03" ).fadeIn( "slow" );
				$('.selectpicker').selectpicker('show');

			} );
		}
		//---------------------------------------------------------------------------
		function canvas_change_img(event) {
			var selectedFile = event.target.files[ 0 ];
			var reader = new FileReader();
			reader.onload = putImage2Canvas;
			reader.readAsDataURL( selectedFile );

			$( document ).ready( function () {
				$( "#title" ).animate( {
					left: '-100%',
					opacity: '0%',
					speed: 'slow'
				} );
				$( "#line" ).animate( {
					left: '-100%',
					opacity: '0%',
					speed: 'slow'
				} );
				$( "#btn" ).fadeOut( "fast" );
				$( "#decoration" ).fadeOut("fast");
				$( "#btn_close" ).fadeIn( "slow" );
				$( "#myCanvas" ).fadeIn( "slow" );
				$( "#btn02" ).fadeIn( "slow" );
				$( "#btn03" ).fadeIn( "slow" );
				$('.selectpicker').selectpicker('show');
			} );
		}
		//---------------------------------------------------------------------------
			function resize(){ 
    		$("#canvas").css({ 
        	left: ($(window).width() - $("#myCanvas").outerWidth())/2, 
        	top: (($(window).height()*0.9) - $("#myCanvas").height())/2
    		});        
			$("#btn02").css({ 
        	left: ($(window).width() - $("#btn02").outerWidth())/2, 
    		}); 
			$("#d_sel").css({ 
        	left: ($(window).width() - $("#d_sel").outerWidth())/2, 
    		}); 
				if($(window).width()>$(window).height())
					{
						$("#canvas").css({ 
        				left: ($(window).width() - $("#myCanvas").outerWidth())/2, 
        				top: (($(window).height()) - $("#myCanvas").height())/2.5
    					});        
						
						$("#btn02").css({ 
        				left: ($(window).width() - $("#btn02").outerWidth())/2, 
    					}); 
					}
		}
	//----------------------------------------------------------------------------
		function clickclose() {
			$( "#title" ).animate( {
				left: '8%',
				opacity: '100%',
				speed: 'slow'
			} );
			$( "#line" ).animate( {
				left: '8%',
				opacity: '100%',
				speed: 'slow'
			} );
			$( "#btn" ).fadeIn( "slow" );
			$( "#decoration" ).fadeIn("slow");
			$( "#btn_close" ).fadeOut( "slow" );
			$( "#localImag" ).fadeOut( "slow" );
			$( "#myCanvas" ).fadeOut( "slow" );
			$( "#btn02" ).fadeOut( "slow" );
			$( "#btn03" ).fadeOut( "slow" );

			var file = $( "#file_for_cam" )
			file.after( file.clone().val( "" ) );
			file.remove();

			var file02 = $( "#file_for_img" )
			file02.after( file02.clone().val( "" ) );
			file02.remove();

			var file04 = $( "#file_for_change" )
			file04.after( file04.clone().val( "" ) );
			file04.remove();
			
			//var option=$("#sel option:selected");
			$('.selectpicker').selectpicker('hide');
			//$(option).removeAttr("selected");
			//$('.selectpicker').prototype.deselectAll(); 
			//$('.selectpicker').selectpicker('destroy');
			
			document.getElementById("sel").options.selectedIndex = 0; //回到初始状态
    		$("#sel").selectpicker('refresh');//对searchPayState这个下拉框进行重置刷新
		}
	//------------------------------------------------------------------------------
	function sel(){
		var ImageData = context.getImageData(0,0,myCanvas.width,myCanvas.height);
		
		var option=$("#sel option:selected");
		switch(option.val()){
				case "soft_light":
  					soft_light(ImageData);
  					break;
				case "pin_light":
  					pin_light(ImageData);
  					break;				
				case "darken":
  					darken(ImageData)
  					break;			
				case "overlay":
  					overlay(ImageData);
  					break;			
				case "screen":
  					screen(ImageData);
  					break;	
			//---------------------
				case "fanse01":
  					fanse01(ImageData);
  					break;
				case "fuzzy02":
  					fuzzy02(ImageData);
  					break;
				case "zuiba":
  					zuiba(ImageData);
  					break;
				case "detectskin":
  					detectskin(ImageData);
  					break;
				case "detectred":
  					detectred(ImageData);
  					break;
			//---------------------
				case "gamma":
  					gamma(ImageData,adjust);
  					break;
				case "brightness":
  					brightness(ImageData,adjust);
  					break;
				case "vibrance":
  					vibrance(ImageData,adjust);
  					break;
				case "clip":
  					clip(ImageData,adjust);
  					break;
				case "Fuzzy":
  					Fuzzy(ImageData);
  					break;
				case "contrast":
  					contrast(ImageData,adjust);
  					break;
				case "saturation":
  					saturation(ImageData,adjust);
  					break;
				case "sepia":
  					sepia(ImageData,adjust);
  					break;
				case "rgb2hsl":
  					rgb2hsl(ImageData);
  					break;
				case "hsl2rgb":
  					hsl2rgb(ImageData);
  					break;
				case "option_on_hsl":
  					option_on_hsl(ImageData);
  					break;
				case "hue":
  					hue(ImageData);
  					break;
				case "gauss":
  					gauss(ImageData);
  					break;
				default:
  					
		}
		context.putImageData(ImageData,0,0);
	}
	

	</script>
</body>
</html>